<template>
  <div>
        <van-nav-bar title="我的关注" left-arrow @click-left="$router.back()">
        </van-nav-bar>
        <div class="list" v-for="item in userMessage" :key="item.id"> 
            <div class="box">
                <img src="../assets/R-C (1).jpg" alt="">
                <div class="center">
                    <p>{{item.nickname}}</p>
                    <span>{{item.create_date}}</span>
                </div>
                <span @click="makeCollection(item.id)">取消关注</span>
            </div>
        </div>
  </div>
</template>

<script>
import { follows,user_unfollow} from "@/api/user"
export default {
    data(){
        return{
            userMessage:{}
        }
    },
    created(){
        this.Collection()
    },
    methods:{
        makeCollection(id){
                user_unfollow(id).then((res)=>{
                    if(res.data.message==="取消关注成功"){
                        this.$toast.success(res.data.message)
                        this.Collection()
                    }else{
                        this.$toast.fail(res.data.message)
                        return
                    }
                })
        },
        Collection(){
            follows().then((res)=>{
            this.userMessage=res.data.data
            })
        }
    }
}
</script>

<style lang="less" scoped>
/deep/.van-nav-bar .van-icon {
    color: #333;
    font-size: 20px;
}
.list{
    .box{
        display: flex;
        padding: 25px 10px;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #ccc;
        > img{
            display: block;
            width: (50/360)*100vw;
            height: (50/360)*100vw;
            border-radius: 50%;
            padding: 0 10px;
        }
        > .center{
            flex: 1;
            > p {
                line-height: 30px;
                font-size: 14px;
            }
            > span {
                font-size: 12px;
                color:#999;
            }
        }
        > span {
            height: 30px;
            background-color: #eee;
            font-size: 13px;
            border-radius: 30px;
            line-height: 30px;
            padding: 0px 15px;
        }
    }
}
</style>